<template>
  <div class="module-nav__wrapper">
    <app-name></app-name>
    <div class="module-nav">
      <template v-for="item in data" :key="item.name">
        <module-nav-item :is-active="active === item.name" @click="goto(item)">{{item.label}}</module-nav-item>
      </template>
    </div>
  </div>
</template>
<script>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import AppName from '@/components/app-name/index.vue'
import ModuleNavItem from './module-nav-item'
export default {
  components: { ModuleNavItem, AppName },
  props: { data: Array },
  setup () {
    const route = useRoute()
    const router = useRouter()
    const active = ref('')
    watch(() => route.name, (val) => {
      active.value = val
    }, { immediate: true })
    const goto = ({ name } = {}) => {
      if (name !== active.value) {
        router.push({ name })
      }
    }
    return {
      active,
      goto
    }
  }
}
</script>
<style lang="less">
.module-nav__wrapper{
  display: flex;
  align-items: center;
  width: 100%;
  height: 64px;
  background-image: linear-gradient(to right, rgb(122,120,236),rgb(198,143,218));
  .module-nav{
    display: flex;
    align-items: center;
  }
  li{
    flex-shrink: 0;
    display: inline-block;
    list-style: none;
    margin: 0;
    padding:0;
  }
}
</style>
